﻿<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <jsp:include page="/meta.jsp"></jsp:include>
</head>

<body>

    <!-- Main Wrapper Start -->
    <div class="wrapper bg--shaft">
       
       <jsp:include page="/head.jsp"></jsp:include>

        <!-- Breadcumb area Start -->
        <div class="breadcrumb-area">
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center">
                        <h1 class="page-title">title</h1>
                        <ul class="breadcrumb justify-content-center">
                            <li><a href="/index.jsp">Home</a></li>
                            <li><a href="/shop.jsp">Collections</a></li>
                            <li class="current"><a href="#" class="page-title">title</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- Breadcumb area End -->

        <!-- Main Content Wrapper Start -->
        <div class="main-content-wrapper">
            <div class="single-products-area section-padding section-md-padding">
                <div class="container">
                    <!-- Single Product Start -->
                    <section class="mirora-single-product pb--80 pb-md--60">
                        <div class="row">
                            <div class="col-lg-6 order-lg-2 mb--30">
                                <div class="row gallery-row">
                                    <div class="col-sm-6 mb--20">
                                        <div class="product-details-gallery-img">
                                            <a id="a01" class="popup-btn" href="/assets/img/products/fore.jpg">
                                                <img id="i01" src="/assets/img/products/fore.jpg" alt="product">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 mb--20">
                                        <div class="product-details-gallery-img">
                                            <a id="a02" class="popup-btn" href="/assets/img/products/fore.jpg">
                                                <img id="i02" src="/assets/img/products/fore.jpg" alt="product">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 mb-xsm--20">
                                        <div class="product-details-gallery-img">
                                            <a id="a03" class="popup-btn" href="/assets/img/products/fore.jpg">
                                                <img id="i03" src="/assets/img/products/fore.jpg" alt="product">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="product-details-gallery-img">
                                            <a id="a04" class="popup-btn" href="/assets/img/products/fore.jpg">
                                                <img id="i04" src="/assets/img/products/fore.jpg" alt="product">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 order-lg-1">
                                <!-- Single Product Content Start -->
                                <div class="product-details-content"> 
                                    <div class="product-details-top">
                                        <h2 class="product-details-name">title</h2>
                                        <div class="ratings-wrap">
                                            <div class="ratings">
                                                <i class="fa fa-star rated"></i>
                                                <i class="fa fa-star rated"></i>
                                                <i class="fa fa-star rated"></i>
                                                <i class="fa fa-star rated"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                            <span>
                                                <a class="review-btn" href="#singleProductTab"><font id="reviews">134</font> Reviews</a>
                                                <a class="review-btn" href="#singleProductTab">write a review</a>
                                            </span>
                                        </div>
                                        <ul class="product-details-list list-unstyled">
                                            <li>Brand: <a href="">SDDL</a></li>
                                            <li>Product Code: <font class="artist-series">Artist Series</font></li>
                                            <li>Reward Points: 600</li>
                                            <li>Availability: In Stock</li>
                                        </ul>
                                        <div class="product-details-price-wrapper">
                                            <span class="money">$0.00</span>
                                            <span class="product-price-old">
                                                <span class="money">0.00</span>
                                            </span>
                                        </div>                                      
                                    </div>  

                                    <div class="product-details-bottom">

                                        <div class="product-details-action-wrapper mb--20">
                                            <div class="product-details-action-top d-flex align-items-center mb--20">
                                                <button id="toCart" type="button" class="btn btn-medium btn-style-2 add-to-cart">
                                                    Add To Cart
                                                </button>
                                            </div>
                                            <div class="product-details-action-bottom">
                                                <a id="toWish" href="#">+Add to wishlist</a>
                                                <a id="toCompare" href="#">+Add to compare</a>
                                            </div>
                                        </div>  
                                        <p class="product-details-tags">
                                            Tags: <a href="/collections.jsp">Customized</a>,
                                            <a href="/collections.jsp">Watches</a>
                                        </p> 
                                        <div class="social-share">
                                            <a href="https://facebook.com" class="facebook share-button">
                                                <i class="fa fa-facebook"></i>
                                                <span>Like</span>
                                            </a>
                                            <a href="https://twitter.com" class="twitter share-button">
                                                <i class="fa fa-twitter"></i>
                                                <span>Tweet</span>
                                            </a>
                                            <a href="#" class="share share-button">
                                                <i class="fa fa-plus-square"></i> 
                                                <span>Share</span>
                                            </a>
                                        </div>
                                    </div>       
                                </div>
                                <!-- Single Product Content End -->
                            </div>
                        </div>
                    </section>
                    <!-- Single Product End -->  

                    <!-- Single Product Tab Start -->
                    <section class="product-details-tab bg--dark-4 ptb--80 ptb-md--60">
                        <div class="row">
                            <div class="col-12">
                                <ul class="product-details-tab-head nav nav-tab" id="singleProductTab" role="tablist">
                                    <li class="nav-item product-details-tab-item">
                                        <a class="nav-link product-details-tab-link active" id="nav-desc-tab" data-toggle="tab" href="#nav-desc" role="tab" aria-controls="nav-desc" aria-selected="true">Description</a>
                                    </li>
                                    <li class="nav-item product-details-tab-item">
                                        <a class="nav-link product-details-tab-link" id="nav-details-tab" data-toggle="tab" href="#nav-details" role="tab" aria-controls="nav-details" aria-selected="true">Additional Information</a>
                                    </li>

                                    <li class="nav-item product-details-tab-item">
                                        <a class="nav-link product-details-tab-link" id="nav-review-tab" data-toggle="tab" href="#nav-review" role="tab" aria-controls="nav-review" aria-selected="true">review (2)</a>
                                    </li>
                                </ul>
                                <div class="product-details-tab-content tab-content">
                                	<!-- 商品介绍区域 -->
                                    <div class="tab-pane fade show active" id="nav-desc" role="tabpanel" aria-labelledby="nav-desc-tab">
                                        <p class="product-details-description" style="text-align: center;">
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        <img src="/assets/img/products/detail/Hbe802e3973344cc9838a9e945a881ba9T.jpg" />
										<img src="/assets/img/products/detail/Hf327dc30a8d5443c89363546227e714ei.jpg" />
										<img src="/assets/img/products/detail/H552741e7548542b99d5a64e96cd84cacR.jpg" />
										<img src="/assets/img/products/detail/H008dc252a1c14c75922cfe8a85493b52X.jpg" />
										<img src="/assets/img/products/detail/H492ab810b498457a9927b7930b5e0df9G.jpg" />
										<img src="/assets/img/products/detail/H8342268e5f7c4b3da53c5ae5637a86ccb.jpg" />
										<img src="/assets/img/products/detail/H619bfdfaf9944e2eae8fb53848049a92l.jpg" />
										<img src="/assets/img/products/detail/Hb2a2339831aa4a35b2591fd40bc298da1.jpg" />
          
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        </p>
                                        <p style="text-align: center;">
                                        	 <img src="/assets/img/products/product_detail01.jpg" alt="product">
                                        </p>
                                        <p style="text-align: center;">
                                        	 <img src="/assets/img/products/product_detail02.jpg" alt="product">
                                        </p>
                                        <p style="text-align: center;">
                                        	 <img src="/assets/img/products/product_detail03.jpg" alt="product">
                                        </p>
                                    </div>
                                    <!-- 商品属性区域 -->
                                    <div class="tab-pane" role="tabpanel" id="nav-details" aria-labelledby="nav-details-tab">
                                        <div class="product-details-additional-info">
                                            <h3>Additional Information</h3>
                                            <div class="table-content table-responsive">
                                                <table class="shop_attributes">
                                                    <tr>
                                                        <th style="width: 30%">Model Number: </th>
                                                        <td><p>Tourbillon-Ink dragon</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Item Type: </th>
                                                        <td><p>Tourbillon Watch</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Movement: </th>
                                                        <td><p>Tourbillon Movement</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Case Material: </th>
                                                        <td><p>316L Stainless steel</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Case Thickness: </th>
                                                        <td><p>11.5mm</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Dial Diameter: </th>
                                                        <td><p>41mm</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Band Width: </th>
                                                        <td><p>20mm</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Style: </th>
                                                        <td><p>special</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Water Resistance Depth: </th>
                                                        <td><p>5 atm waterproof</p></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Function: </th>
                                                        <td><p>Luminous</p></td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 商品评论区域 -->
                                    <div class="tab-pane" role="tabpanel" id="nav-review" aria-labelledby="nav-review-tab">
                                        <div class="product-details-review-wrap">
                                            <h2 class="mb--20">2 REVIEWS FOR ALIQUAM LOBORTIS</h2>
                                            <div class="review mb--40">
                                                <div class="review__single">
                                                    <div class="review__meta">
                                                        <p class="review__author">K. Kadrmas</p>
                                                        <p class="review__date">October 12, 2019</p>
                                                    </div>
                                                    <div class="review__content">
                                                        <p class="review__text">
                                                            If you really want to save money, but still get a quality product, buy this.I had a friend recommend it to me, I think it is great!
                                                        </p>
                                                        <div class="ratings">
                                                            <i class="fa fa-star rated"></i>
                                                            <i class="fa fa-star rated"></i>
                                                            <i class="fa fa-star rated"></i>
                                                            <i class="fa fa-star rated"></i>
                                                            <i class="fa fa-star rated"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="review__single">
                                                    <div class="review__meta">
                                                        <p class="review__author">Patricia</p>
                                                        <p class="review__date">July 22, 2020</p>
                                                    </div>
                                                    <div class="review__content">
                                                        <p class="review__text">
                                                            It’s both good and bad.
                                                        </p>
                                                        <div class="ratings">
                                                            <i class="fa fa-star rated"></i>
                                                            <i class="fa fa-star rated"></i>
                                                            <i class="fa fa-star rated"></i>
                                                            <i class="fa fa-star rated"></i>
                                                            <i class="fa fa-star rated"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <h2 class="mb--20">Add a Review</h2>
                                            <form class="form form--review">
                                                <div class="form__group clearfix mb--20">
                                                    <label class="form__label d-block" >Your Ratings</label>
                                                    <div class="rating">
                                                        <input type="radio" id="star5" name="rating" value="5" />
                                                        <label class = "full" for="star5" title="Awesome - 5 stars">  
                                                        </label>
                                                        <input type="radio" id="star4half" name="rating" value="4 and a half" />
                                                        <label class="half" for="star4half" title="Pretty good - 4.5 stars">
                                                        </label>
                                                        <input type="radio" id="star4" name="rating" value="4" />
                                                        <label class = "full" for="star4" title="Pretty good - 4 stars"> 
                                                        </label>
                                                        <input type="radio" id="star3half" name="rating" value="3 and a half" />
                                                        <label class="half" for="star3half" title="Meh - 3.5 stars">  
                                                        </label>
                                                        <input type="radio" id="star3" name="rating" value="3" />
                                                        <label class = "full" for="star3" title="Meh - 3 stars">    
                                                        </label>
                                                        <input type="radio" id="star2half" name="rating" value="2 and a half" />
                                                        <label class="half" for="star2half" title="Kinda bad - 2.5 stars">    
                                                        </label>
                                                        <input type="radio" id="star2" name="rating" value="2" />
                                                        <label class = "full" for="star2" title="Kinda bad - 2 stars">    
                                                        </label>
                                                        <input type="radio" id="star1half" name="rating" value="1 and a half" />
                                                        <label class="half" for="star1half" title="Meh - 1.5 stars">    
                                                        </label>
                                                        <input type="radio" id="star1" name="rating" value="1" />
                                                        <label class = "full" for="star1" title="Sucks big time - 1 star">    
                                                        </label>
                                                        <input type="radio" id="starhalf" name="rating" value="half" />
                                                        <label class="half" for="starhalf" title="Sucks big time - 0.5 stars">    
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="form__group clearfix mb--20">
                                                    <label class="form__label d-block" for="review_name">Name <sup>*</sup></label>
                                                    <input id="review_name" name="review_name" class="form__input">
                                                </div>
                                                <div class="form__group clearfix mb--20">
                                                    <label class="form__label d-block" for="review_email">Email <sup>*</sup></label>
                                                    <input id="review_email" name="review_email" class="form__input">
                                                </div>
                                                <div class="form__group clearfix mb--20">
                                                    <label class="form__label d-block" for="review">Your Review <sup>*</sup></label>
                                                    <textarea id="review" name="review" class="form__input form__input--textarea"></textarea>
                                                    <div class="help-block">
                                                        <span>Note: </span>
                                                        HTML is not translated!
                                                    </div>
                                                </div>
                                                <div class="form__group text-right">
                                                    <button type="submit" class="btn btn-medium btn-style-1">Continue</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- Single Product Tab End -->

                  
                </div>
            </div>
            
            
             <jsp:include page="/blog.jsp"></jsp:include>

            <jsp:include page="/letter.jsp"></jsp:include>
            
            
            
            
        </div>
        <!-- Main Content Wrapper End -->


       <jsp:include page="/foot.jsp"></jsp:include>

        <!-- Scroll To Top Start -->    
        <a class="scroll-to-top" href=""><i class="fa fa-angle-double-up"></i></a>
        <!-- Scroll To Top End -->

    </div>
    <!-- Main Wrapper End -->


    <!-- ************************* JS Files ************************* -->

    <!-- jQuery JS -->
    <script src="/assets/js/vendor/jquery.min.js"></script>

    <!-- Bootstrap and Popper Bundle JS -->
    <script src="/assets/js/bootstrap.bundle.min.js"></script>

    <!-- All Plugins Js -->
    <script src="/assets/js/plugins.js"></script>
    <!-- Ajax Mail Js -->
    <script src="/assets/js/ajax-mail.js"></script>

    <!-- Main JS -->
    <script src="/assets/js/main.js"></script>
    
    <script type="text/javascript">
    		
   		 $(function(){
   			 	
   			$("#reviews").text(Math.round(Math.random()*1000));
   			 
   			$(".page-title").text(product["artist01"].pname);
   			$(".product-details-name").text(product["artist01"].pname);
   			$(".artist-series").text(product["artist01"].series);
   			$(".money").text(product["artist01"].price);
		    $(".product-price-old").text(product["artist01"].market);
   			 
	    	$("#a01").attr("href",product["artist01"].img01);
	    	$("#i01").attr("src",product["artist01"].img01);
	    	$("#a02").attr("href",product["artist01"].img02);
	    	$("#i02").attr("src",product["artist01"].img02);
	    	$("#a03").attr("href",product["artist01"].img03);
	    	$("#i03").attr("src",product["artist01"].img03);
	    	$("#a04").attr("href",product["artist01"].img04);
	    	$("#i04").attr("src",product["artist01"].img04);
	    	
	    	$("#toWish").click(function(){
	    		toWish('artist01');
	    	});
	    	$("#toCompare").click(function(){
	    		toCompare('artist01');
	    	});
	    	$("#toCart").click(function(){
	    		toCart('artist01');
	    	});
   	  })
    		    
    </script>

</body>

</html>
